import { Select } from 'antd';
import React from 'react'
import { useTranslation } from 'react-i18next';
import { Outlet } from 'react-router-dom'

function index() {
  const { t, i18n } = useTranslation();
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
    i18n.changeLanguage(value)
  };
  return (
    <div>
       <Select
      defaultValue="en"
      style={{ width: 120 }}
      onChange={handleChange}
      options={[
        { value: 'en', label: 'English' },
        { value: 'zh', label: '中文' }, 
      ]}
    />
     <h1>{t('Welcome to React')}</h1>
      <Outlet></Outlet>
    </div>
  )
}

export default index
